<template>
  <div class="login-root" />
  <section class="login-root-win">
    <h2>登录</h2>

    <el-form :model="logParams">
      <el-form-item label="">
        <el-input
          v-model="logParams.user"
          placeholder="账户"
          clearable
        >
          <template #prefix>
            <el-icon color="#fff">
              <User />
            </el-icon>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item label="">
        <el-input
          v-model="logParams.pwd"
          placeholder="密码"
          show-password
          type="password"
        >
          <template #prefix>
            <el-icon color="#fff">
              <Lock />
            </el-icon>
          </template>
        </el-input>
      </el-form-item>
    </el-form>

    <el-button>
      登录
    </el-button>

    <p class="login-root-forget-pwd">
      <el-button link>
        忘记密码?
      </el-button>
    </p>
  </section>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import { User, Lock } from '@element-plus/icons-vue'

const logParams = reactive({
  user: '',
  pwd: ''
})
</script>

<style lang="scss" scoped>

$themeColor: #ffffff;

@keyframes startPage {

  100% {
    opacity: 1;
  }
}

.login-root {
  height: 100%;
  animation: startPage 1s linear forwards;
  opacity: 0;

  // background-image: linear-gradient(225deg, #504538, #9E9488, #C0A788);
  background: url("@/assets/imgs/login/bc.jpg") no-repeat 0 0 / 100% 100%;
  filter: blur(2px);
}

.login-root-win {

  position: fixed;
  right: 10%;
  top: 30%;

  color: $themeColor;
  width: 300px;
  border-radius: 10px;

  border: 2px solid;
  padding: 20px;

  >h2 {
    margin-bottom: 10px;
  }

  .el-input {
    --el-input-bg-color: transparent;
    --el-input-border-color: #{$themeColor};

    :deep(.el-input__inner::placeholder) {
      color: $themeColor + cc;
    }
  }

  >.el-button {
    width: 100%;
    color: $themeColor;
    background-color: transparent;
  }

  .login-root-forget-pwd {
    margin-top: 10px;
    text-align: right;

    .el-button {
      --el-button-text-color: $themeColor;
    }

  }
}
</style>
